<template>
<!-- 班长的页面 -->
  <main>
      <my-header></my-header>
      <my-foor></my-foor>
    <div class="secban" id="secban">
      <!-- 轮播图文字 -->
      

      <div class="yjpp">
        <mu-carousel :active="active">
          <mu-icon value="" slot="left"></mu-icon>
          <mu-icon value="" slot="right"></mu-icon>
          <template slot="indicator" slot-scope="{ index, active }">
            <mu-button
              icon
              class="mu-carousel-indicator-button"
              :class="{ 'mu-carousel-indicator-button__active': active }"
              @click="changeActive(index)"
            >
              <span class="rect-indicator"></span>
            </mu-button>
          </template>
          <mu-carousel-item>
            <img :src="carouselImg1" />
          </mu-carousel-item>
          <mu-carousel-item>
            <img :src="carouselImg2" />
          </mu-carousel-item>
          <mu-carousel-item>
            <img :src="carouselImg3" />
          </mu-carousel-item>
          <mu-carousel-item>
            <img :src="carouselImg4" />
          </mu-carousel-item>
          <mu-carousel-item>
            <img :src="carouselImg5" />
          </mu-carousel-item>
          <mu-carousel-item>
            <img :src="carouselImg6" />
          </mu-carousel-item>
        </mu-carousel>
      </div>
    </div>
    <div>
      <div class="secbar">
        <div class="secbarc">
          <div class="secbardot">
            当前位置：
            <a href="javascript:;">首页</a>> <a href="javascript:;">产品力</a>>
          </div>
        </div>
      </div>
    </div>
    <ul class="fgm">
      <!-- 需要判断一下给当前风格和当前系列li添加class=on -->
      <li class="on">
        <span>现代风格</span>
        <ul>
          <li class="on">
            <a href="javascript:;">星潮系列</a>
          </li>
          <li>
            <a href="javascript:;">索恩系列</a>
          </li>
          <li>
            <a>星影系列</a>
          </li>
          <li>
            <a href="javascript:;">华尔兹系列</a>
          </li>
          <li>
            <a href="javascript:;">第六空间系列</a>
          </li>
          <li>
            <a href="javascript:;">莫里斯系列</a>
          </li>
          <li>
            <a href="javascript:;">蒂斯系列</a>
          </li>
        </ul>
      </li>
      <li>
        <span>轻奢风</span>
        <ul>
          <li>
            <a href="javascript:;">西雅图系列</a>
          </li>
          <li>
            <a href="javascript:;">艾菲尔系列</a>
          </li>
          <li>
            <a href="javascript:;">莫卡系列</a>
          </li>
          <li>
            <a href="javascript:;">格雷洛系列</a>
          </li>
        </ul>
      </li>
      <li>
        <span>欧式</span>
        <ul>
          <li>
            <a href="javascript:;">阿维尼翁系列</a>
          </li>
          <li>
            <a href="javascript:;">复古公爵系列</a>
          </li>
        </ul>
      </li>
      <li>
        <span>新中式</span>
        <ul>
          <li>
            <a href="javascript:;">韵系列</a>
          </li>
          <li>
            <a href="javascript:;">尚系列</a>
          </li>
        </ul>
      </li>
      <li>
        <span>工业风</span>
        <ul>
          <li>
            <a href="javascript:;">巴特洛系列</a>
          </li>
          <li>
            <a href="javascript:;">乌托邦系列</a>
          </li>
        </ul>
      </li>
      <li>
        <span>新北欧</span>
        <ul>
          <li>
            <a href="javascript:;">卡莉特斯系列</a>
          </li>
          <li>
            <a href="javascript:;">空灵系列</a>
          </li>
        </ul>
      </li>
    </ul>
    <div class="probox">
      <div class="probox2">
        <div class="prop wow zoomInB coverimg">
          <a
            href="https://file.suofeiya.com.cn/v/d3516ca6-d50f-4bb7-8136-7a18f843c39a"
            class="prolink"
            ><img
              src="https://file.suofeiya.com.cn/v/d3516ca6-d50f-4bb7-8136-7a18f843c39a?x-oss-process=image/resize,l_600"
          /></a>
          <span>星潮系列</span>
          <span class="t2"></span>
        </div>

        <div class="prop wow zoomInB coverimg">
          <a
            href="https://file.suofeiya.com.cn/v/782a96de-d7e6-4b48-8d9c-dc86ff5fc76e"
            class="prolink"
            ><img
              src="https://file.suofeiya.com.cn/v/782a96de-d7e6-4b48-8d9c-dc86ff5fc76e?x-oss-process=image/resize,l_600"
          /></a>
          <span>星潮系列</span>
          <span class="t2"></span>
        </div>

        <div class="prop wow zoomInB coverimg">
          <a
            href="https://file.suofeiya.com.cn/v/e7be6659-ee44-485a-968a-c653d52ab1a4"
            class="prolink"
            ><img
              src="https://file.suofeiya.com.cn/v/e7be6659-ee44-485a-968a-c653d52ab1a4?x-oss-process=image/resize,l_600"
          /></a>
          <span>星潮系列</span>
          <span class="t2"></span>
        </div>

        <div class="prop wow zoomInB coverimg">
          <a
            href="https://file.suofeiya.com.cn/v/579f76ae-ecfb-43e1-afff-cd13721cc3d8"
            class="prolink"
            ><img
              src="https://file.suofeiya.com.cn/v/579f76ae-ecfb-43e1-afff-cd13721cc3d8?x-oss-process=image/resize,l_600"
          /></a>
          <span>星潮系列</span>
          <span class="t2"></span>
        </div>

        <div class="prop wow zoomInB coverimg">
          <a
            href="https://file.suofeiya.com.cn/v/fba87ec1-9b9c-465e-bdd5-20a271618acd"
            class="prolink"
            ><img
              src="https://file.suofeiya.com.cn/v/fba87ec1-9b9c-465e-bdd5-20a271618acd?x-oss-process=image/resize,l_600"
          /></a>
          <span>星潮系列</span>
          <span class="t2"></span>
        </div>

        <div class="prop wow zoomInB coverimg">
          <a
            href="https://file.suofeiya.com.cn/v/7d897dac-8bc2-4e7e-8af2-bb77d3701fdc"
            class="prolink"
            ><img
              src="https://file.suofeiya.com.cn/v/7d897dac-8bc2-4e7e-8af2-bb77d3701fdc?x-oss-process=image/resize,l_600"
          /></a>
          <span>星潮系列</span>
          <span class="t2"></span>
        </div>
      </div>
 
    </div>
          <div class="footbox">
      <div class="foot">
        <ul>
          <li class="father">品牌力</li>
          <li>生产经营</li>
          <li>品牌轨迹</li>
          <li>企业荣誉</li>
          <li>销售网络</li>
          <li>全流程服务</li>
          <li>智能制造</li>
        </ul>
        <ul>
          <li class="father">产品力</li>
          <li>新品展示</li>
          <li>时尚设计</li>
          <li>环保生活</li>
        </ul>
        <ul>
          <li class="father">投资者关系</li>
          <li>信息披露</li>
          <li>公司治理</li>
          <li>基本数据</li>
          <li>投资者教育</li>
          <li>投资者接待</li>
          <li>投资者保护</li>
        </ul>
        <ul>
          <li class="father">社会责任</li>
          <li>抗疫行动</li>
          <li>稀捍行动</li>
          <li>希望行动</li>
          <li>关爱行动</li>
        </ul>
        <ul>
          <li class="father"></li>
          <li class="father">新闻中心</li>
          <li>企业动态</li>
          <li>媒体报道</li>
          <li>企业年刊</li>
        </ul>
        <ul>
          <li class="father">招商加盟</li>
          <li>索菲亚柜类定制专家</li>
          <li>华鹤定制家居</li>
          <li>米兰纳定制家居</li>
          <li>家具家品</li>
          <li>工程业务</li>
          <li>>新渠道业务</li>
        </ul>
        <ul>
          <li class="father">商城</li>
          <li>索菲亚柜类定制专家</li>
          <li>司米定制家居</li>
          <li>华鹤定制家居</li>
          <li>米兰纳定制家居</li>
          <li>投资者接待</li>
          <li>投资者保护</li>
        </ul>
        <ul>
          <li class="father">加入我们</li>
          <li>校园招聘</li>
          <li>社会招聘</li>
          <li>培训发展</li>
          <li>米兰纳定制家居</li>
          <li>投资者接待</li>
          <li>投资者保护</li>
        </ul>
      </div>
      <div class="fbq">
        索菲亚家居股份有限公司　保留所有版权© 2021　 target="_blank"
        >粤ICP备10048445号
      </div>
    </div>
  </main>
</template>
<script>

import carouselImg1 from "../assets/images/pro1.jpg";
import carouselImg2 from "../assets/images/pro2.jpg";
import carouselImg3 from "../assets/images/pro3.jpg";
import carouselImg4 from "../assets/images/pro4.jpg";
import carouselImg5 from "../assets/images/pro5.jpg";
import carouselImg6 from "../assets/images/pro6.jpg";

export default {
  data() {
    return {
      carouselImg1,
      carouselImg2,
      carouselImg3,
      carouselImg4,
      carouselImg5,
      carouselImg6,
      active: 0,
    };
  },
  methods: {
    changeActive(index) {
      this.active = index;
    },
  },
};
</script>

<style scoped>
/* 页脚冯佳佳修改 */

.footbox {
  width: 100%;
  height: auto;
  overflow: hidden;
  background-color: #2d2d2d;
  height: 290px;

}
.foot {
  width: 100%;
  height: auto;
  padding: 30px 0;
  text-align: center;
  overflow: hidden;
  font-size: 0;
}

.foot ul {
  width: 130px;
  height: auto;
  display: inline-block;
  vertical-align: top;
  border-left: 1px solid #555;
  padding-left: 10px;
  padding-bottom: 10px;
}

.foot ul li {
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  text-align: left;
  color: #ccc;
  font-size: 12px;
}

.foot ul li.father {
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 20px;
  font-weight: bold;
}

.foot ul li a {
  text-decoration: none;
  color: #ccc;
  padding: 0 5px;
}

.foot ul li a:hover {
  background: #775c39;
}

.fbq {
  width: 100%;
  height: 35px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.7);
  color: #aaa;
  text-align: center;
  line-height: 35px;
}

.fbq a {
  color: #ccc;
}


/* 轮播图文字实现 */


/* 产品力 */
* {
  padding: 0;
  margin: 0;
  touch-action: pan-y;
}
.probox {
  width: 1180px;
  height: auto;
  overflow: hidden;
  margin: 50px auto;
}
.probox2 {
  width: 1250px;
  height: auto;
  overflow: hidden;
}
.prop {
  width: 565px;
  height: 450px;
  float: left;
  overflow: hidden;
  margin: 0 50px 50px 0;
  background: #f5f5f5;
  position: relative;
}
.prop a {
  display: block;
  width: 100%;
  height: 360px;
  overflow: hidden;
  margin-bottom: 15px;
}
.prop a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: all 0.5s;
}
.prop:hover img {
  transform: scale(1.1);
}
.prop span {
  display: block;
  font-size: 16px;
  line-height: 30px;
  padding-left: 10px;
}
.prop span t2 {
  color: #999;
  font-size: 12px;
}
.prop img.aro {
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  right: 30px;
  bottom: 30px;
  opacity: 0.3;
}
.prop img.aro:hover {
  opacity: 1;
}

.secbar {
  width: 100%;
  height: auto;
  padding-left: 40px;
  overflow: hidden;
  background-clip: #f5f5f5;
}
.secbardot {
  padding-left: 40px;
  float: left;
}

.banb {
  width: 100%;
  height: 85px;
  position: absolute;
  z-index: 10;
  bottom: 0;
  text-align: center;
  font-size: 0;
}

.banb em {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin: 0 6px;
  cursor: pointer;
  border: 1px solid #999;
  background: rgba(255, 255, 255, 0);
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.banb em.on {
  width: 50px;
  border: 1px solid #ddd;
  background: rgba(255, 255, 255, 0.4);
}
.bant1 {
  width: 650px;
  height: 80px;
  font-size: 36px;
  line-height: 80px;
  color: #fff;
  text-align: center;
  position: absolute;
  left: 50%;
  margin-left: -320px;
  top: 35%;
  z-index: 10;
}
.bant2 {
  width: 650px;
  height: auto;
  overflow: hidden;
  font-size: 14px;
  line-height: 30px;
  color: #fff;
  position: absolute;
  left: 50%;
  margin-left: -320px;
  top: 50%;
  text-align: center;
  z-index: 10;
}

.pagecont {
  width: 800px;
  height: auto;
  position: absolute;
  left: 50%;
  margin-left: -400px;
  top: 40%;
  text-align: center;
  color: #fff;
  z-index: 10;
}

.pagecont .t1 {
  line-height: 100px;
  font-size: 48px;
}

.pagecont .t2 {
  line-height: 30px;
  font-size: 14px;
  letter-spacing: 14px;
  padding-left: 10px;
}

.sect {
  height: 70px;
  padding-top: 50px;
  overflow: hidden;
  text-align: center;
}

.sect span {
  display: inline-block;
  font-size: 24px;
  position: relative;
}

.sect span:after {
  content: "";
  position: absolute;
  width: 48px;
  height: 1px;
  left: 0;
  top: 40px;
  background: #333;
}
.sect i {
  display: block;
  font-size: 18px;
  text-align: center;
  color: #999;
  line-height: 40px;
  font-style: normal;
  margin-top: 12px;
}

.fgm {
  width: 1180px;
  height: 70px;
  background: #333;
  text-align: center;
  position: relative;
  margin: 30px auto 120px auto;
}
.fgm > li {
  display: inline-block;
  height: 100%;
}
.fgm > li > span {
  display: block;
  line-height: 40px;
  padding: 0 30px;
  color: #ddd;
  font-size: 16px;
  border: 1px solid #333;
  margin-top: 15px;
  cursor: pointer;
}
.fgm > li.on > span {
  border: 1px solid #686868;
  font-weight: bold;
}
.fgm > li > ul {
  display: none;
  position: absolute;
  left: 0;
  top: 70px;
  background: #f0f0f0;
  width: 100%;
  height: 60px;
  text-align: center;
  z-index: 0;
}
.fgm > li.on > ul {
  display: block;
}
.fgm > li:hover > ul {
  display: block;
  z-index: 0;
}
.fgm > li > ul > li {
  display: inline-block;
  height: 59px;
  margin: 0 30px;
}
.fgm > li > ul > li > a {
  display: block;
  font-size: 14px;
  line-height: 60px;
  text-decoration: none;
}
.fgm > li > ul > li.on {
  border-bottom: 1px solid #333;
}

@media screen and (max-width: 1500px) {
  .fgm {
    width: 1060px;
    height: 60px;
    margin: 30px auto 100px auto;
  }
  .fgm > li > span {
    line-height: 30px;
    font-size: 14px;
  }
  .fgm > li > ul {
    top: 60px;
    height: 50px;
  }
  .fgm > li > ul > li {
    height: 49px;
  }
  .fgm > li > ul > li > a {
    font-size: 12px;
    line-height: 50px;
  }
  .probox {
    width: 1060px;
    margin: 40px auto;
  }
  .prop {
    width: 505px;
    height: 400px;
  }
  .prop a {
    height: 310px;
  }
  .bant1 {
    font-size: 32px;
    top: 32%;
  }
}

@media screen and (max-width: 1300px) {
  .fgm {
    width: 960px;
    height: 50px;
    margin: 30px auto 90px auto;
  }
  .fgm > li > span {
    line-height: 20px;
    font-size: 14px;
  }
  .fgm > li > ul {
    top: 50px;
    height: 45px;
  }
  .fgm > li > ul > li {
    height: 44px;
  }
  .fgm > li > ul > li > a {
    font-size: 12px;
    line-height: 45px;
  }
  .probox {
    width: 960px;
    margin: 40px auto;
  }
  .prop {
    width: 455px;
    height: 380px;
  }
  .prop a {
    height: 300px;
    margin-bottom: 10px;
  }
  .prop span {
    font-size: 14px;
    line-height: 26px;
  }
  .prop img.aro {
    width: 25px;
    height: 25px;
  }
}
</style>
